<template>
    <div class="container">
        <!-- 工序时间线 -->
        <div>
            <el-scrollbar>
                <el-timeline>
                    <el-timeline-item v-for="item in userProcedures" @click="handleClick(item)" :key="item.Id"
                        :timestamp="formatDate(new Date(item.BeginDate))" :type="item.Status == 1? 'info':'primary'">
                        <div class="timeline-container">
                            <div>{{ item.ProcedureName }}</div>
                            <div>
                                <el-avatar src="http://localhost:5099/wwwroot/images/240809040629945995.jpg"
                                    :size="28"></el-avatar>
                                <span>{{ item.EmployeeName }}</span>
                                <el-tag v-if="item.CheckStatus == 2" type="success">已验收</el-tag>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </el-scrollbar>
        </div>


        <div class="record-container">
            <div class="tital">
                {{ selecedItem.ProcedureName }}
                <span>({{ records.length }})</span>
                <div class="operate-box" >
                    <el-button v-if="selecedItem.CheckStatus!=2&&selecedItem.Status==2" @click="handleCheck" size="small" type="primary" plain>验收</el-button>
                    <el-button v-if="selecedItem.CheckStatus!=2&&selecedItem.Status==2" @click="handleReject" size="small" type="warning" plain>驳回</el-button>
                </div>
            </div>

            <div class="records">
                <el-scrollbar>
                    <div class="record-content">
                        <div class="record" v-for="item in records" :key="item.Id">
                            <el-image fit="cover"
                                :src="'http://localhost:5099/wwwroot/images/' + item.WorkPict"></el-image>
                            <div class="record-info">
                                <span>
                                    {{ item.WorkDesc }}
                                </span>
                                <span>
                                    {{ item.CreateTime }}
                                </span>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import userprocedureapi from '../../api/userprocedureapi';
    import userprocedureRecordApi from '../../api/userprocedureRecordApi';
import { ElMessage } from 'element-plus';

    const { id } = defineProps({
        id: {
            type: Number,
            required: true
        }
    });
    const emit = defineEmits(["onSave"]);

    const userProcedures = ref<Array<any>>([]);
    const records = ref<Array<any>>([]);

    const selecedItem = ref<any>({});

    // 获取工序记录
    const getRecord = (id:number)=>{
        userprocedureRecordApi.getByProcedure(id).then((res: any) => {
            records.value = res.data;
        })
    }

    // 获取项目工序
    userprocedureapi.getByProject(id).then((res: any) => {
        userProcedures.value = res.data;
        userProcedures.value.sort((a:any,b:any)=>{ return a.ProcedureOrder-b.ProcedureOrder});
        selecedItem.value = userProcedures.value[0];
        getRecord(selecedItem.value.Id);
    });

    // 时间线点击事件
    const handleClick = (item: any) => {
        selecedItem.value = item;

        getRecord(item.Id);
    }

    // 验收
    const handleCheck = ()=>{
        selecedItem.value.CheckStatus = 2;
        userprocedureapi.accept(selecedItem.value.Id).then((res:any)=>{
            if(res.code==1){
                ElMessage.success({
                    message:"成功"
                });
            }else{
                ElMessage.error({
                    message:"失败"
                });
            }

            let item = userProcedures.value.find(o=>o.CheckStatus!=2);
            console.log(userProcedures.value);
            console.log(item);
            
            
            if(item===undefined){
                ElMessage.success({
                    message:"项目已完成"
                });
                emit("onSave");
            }

            getRecord(selecedItem.value.Id);

        });
    }

    // 驳回
    const handleReject = ()=>{
        console.log(selecedItem.value.Id);
        userprocedureapi.reject(selecedItem.value.Id).then((res:any)=>{
            selecedItem.value.Status = 1;
            if(res.code==1){
                ElMessage.success({
                    message:"驳回成功"
                });
            }else{
                ElMessage.error({
                    message:"失败"
                });
            }
        })
    }


</script>

<style scoped>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 500px;
    }

    .timeline-container {
        display: flex;
        flex-direction: column;
        gap: 10px 0;
    }

    .timeline-container>:last-child {
        display: flex;
        align-items: center;
        gap: 0 8px;
        font-size: 12px;
        color: var(--el-color-info-light-2)
    }

    .record-container {
        background-color: var(--el-color-info-light-7);
        border-radius: 0.5rem;
        padding: 1rem;
    }

    .record-container>:first-child {
        font-size: var(--el-font-size-medium);
        color: var(--el-color-black)
    }

    .record-content {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 1rem 0;
    }

    .tital{
        display: flex;

    }

    .tital>span {
        font-size: var(--el-font-size-medium);
        color: var(--el-color-info-dark-2);
    }
    .tital>:last-child{
        flex:1;
        display: flex;
        justify-content: flex-end;
    }

    .record {
        width: 100%;
        display: flex;
        background-color: var(--el-color-info-light-9);
        box-sizing: border-box;
        padding: 0.5rem;
        border-radius: 0.5rem;
    }

    .record>.el-image {
        width: 50px;
        height: 50px;
    }

    .record-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 10px;
    }

    .record-info>:last-child {
        align-self: flex-end;
    }
</style>